<template   >
    <layout  showNew   title="采购信息管理"   @newBtnEvt= " toNewPage" >
         <ul class="list-box"   @scroll="pageScrollEvt"  >
            <li class="item"   v-for = "item in  list " :key = 'item.id'>

                <van-swipe-cell>
                        <span>
                            {{ item.projectName }}
                            <b v-if =  "item.state  !== '作废'">{{ item.state }}</b>
                            <i v-else  ></i>

                        </span>
                        <em>创建人:{{ item.createName }}</em>               
                        <em v-format:red.24.bold = " item.createTime " ></em>

                   
                        <em>采购材料:{{ item.materialName }}</em>
                    <template #right>
                        <van-button  v-if = "item.state === '新建'"       square type="danger" @click="deleteEvt(item)" text="删除" />
                        <van-button   v-if = "item.state === '新建'"   square type="primary" @click="editEvt(item)"    text="编辑" />
                        <van-button   v-if = "item.state === '新建'"   square type="danger" @click="optEvt('confirm',item)" text="确认" />
                        <van-button v-if = "item.state === '确认' "  square type="primary" @click="optEvt('on',item)"    text="在途" />
                        <van-button v-if = "item.state === '在途' "  square type="danger" @click="optEvt('finish',item)" text="完成" />
                        <van-button v-if = "item.state === '完成' "  square type="primary" @click="optEvt('pay',item)"    text="付款" />
                        <van-button   square type="danger"  @click="optEvt('detail',item)" text="详情" />
                        
                    </template>
                </van-swipe-cell>

              
            </li>

            <li v-show="!loading && hasMore " class="more">上滑加载更多数据</li>
            <li v-show="!loading  && !hasMore " class="more">没有更多数据</li>

            <li v-show="loading" class="more">
                <van-loading size="24px">加载中...</van-loading>

            </li>
           
         </ul>
     

         <van-popup v-model="show"   position = "bottom" :style="{height:'30%'}">
            
            <van-form @submit="onSubmit">
            <van-field  label="用户名" >
                <template #button>
                    <van-dropdown-menu>
                      <van-dropdown-item v-model="approveObj.isReject" :options="option1" />
                    </van-dropdown-menu>
                </template>
            </van-field>
            <van-field
                name="审批人"
                label="审批人"
                readonly
                v-model="approveObj.userName"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
            </van-form>
                    
        </van-popup>
    </layout>
</template>

<script>



import { purchaseListApi, purchaseUpdateApi } from '../../apis/purchaseApi'
export default {


data() {
    return {
        loading:true,
        hasMore:true,
        list:[],
        page:1,
        show:false,
        approveObj:{
            id:'',
            isReject:false,
            userId:'',
            userName:'',
            remark:''
 
        },
        option1:[
        { text: '通过', value: false},
        { text: '驳回', value: true },
        ]
    }
},
    


created(){
         this.getList()
         console.log(this.myPageRole)
},

 computed:{
     

   // 通过计算属性，拿到，这个页面上的按钮功能权限
  //  es6 简要写法
 /*   myPageRole(){
         return   ( this.$store.getters['common/roleList'].find(oo=> oo.id  ===  "PROJECT-01-01"  )  || {}).role  ||   []
   } */


   //  分步写法
   myPageRole(){


       let  nowRoleObj  =  this.$store.getters['common/roleList'].find(oo=> oo.id  ===  "PURCHASE-01-01" )
       let  nowRole  = []

       if( !! nowRoleObj){nowRole =  nowRoleObj.role}
       
         return   nowRole.length <= 0  ? []: nowRole
   },


    // 获取当前用户信息
   userInfo(){
             return   this.$store.getters['common/userInfo']
   }

 }, 




methods:{

      async  getList(){
                 
             let result = await  purchaseListApi({page:this.page,size:6})
              if(  result.code === 200){
              
                //  结构方法的使用，合并以前的数据
                 this.list = [...this.list,...result.data.rows]

                 this.hasMore =  (this.page * 6) <  result.data.total
              }

        // 关闭加载标识

        this.loading  = false
              
    },
    pageScrollEvt(evt){
           let   target     = evt.target  
           let   myHeight = target.clientHeight
           let   realHeight = target.scrollHeight
           let    scrollHeight = target.scrollTop


        if(realHeight - myHeight - scrollHeight - 20 <= 0 && !this.loading &&  this.hasMore ){

               // 需要需要把加载状态改为加载中

          this.loading =   true 

          // 需要对页面自增 1 页

          this.page += 1


          // 调用方法，再次获取数据

          this.getList()
            



        }






    },

        toNewPage(){


            if( !this.myPageRole.includes('C')){
                this.$toast.fail('你没有新增权限，请联系管理员')
                return
            }
            this.$router.push({path:'/purchase/edit', query:{fromPage:'list'}})
        },

         // d    删除数据方法
        deleteEvt(item){
            if( !this.myPageRole.includes('D')){
                this.$toast.fail('你没有删除权限，请联系管理员')
                return
            }

        this.$dialog.confirm({
                title: '删除警告',
                message: `你即将把【${item.name}】项目删除，确定要执行？`,
                })
                .then(
                    async () => {
                    // 采购删除业务
                         
                })
                .catch(() => {
                    // on cancel
                });

        },

        //  u 编辑更新功能
        editEvt(item){

            if( !this.myPageRole.includes('U')){
                this.$toast.fail('你没有权限编辑，请联系管理员')
                return
            }
                //   采购编辑业务
        },
       

         /// 单据处理事件
         optEvt(type,item){
               console.log(type,item)

              this.approveObj.id  = item.id
               this.approveObj.userId = this.userInfo.id
               this.approveObj.userName = this.userInfo.name
               this.show = true
         },
        // 处理提交业务
        onSubmit(){
              
            purchaseUpdateApi(this.approveObj).then(data=>{

               
                  if(data.code === 200 ){
                        this.$toast.success('更新采购订单状态成功')
                        this.show = false
                       
                  }else{
                       this.$toast.fail('更新审批状态失败，请重试')
                  }
            })
        }

       } 
}
</script>

<style lang="less" scoped>
    .list-box{
        display: block;
        height: 100%;
        padding: 0  12px;
        overflow-x: hidden;
          .item{
            padding: 12px;
           border-bottom: solid 1px #ddd;

           span{
            display: block;
            font-size: .9rem;
            color: #1e1e1e;
            position: relative;


            >b {
                font-weight: 200;
                font-size: .6rem;
                color: #fe5b02;
            }

            >i{
                display: block;
                position: absolute;
                top: 10px;
                right: 20px;
                width: 60px;
                height: 60px;
                background: url(../../images/cancel-icon.png) center center   /  50px   50px no-repeat ;
            }

           }
       
           em{

            display: block;
            font-size: .7rem;
            font-style: normal;
            color: #aaa;
            margin-top:12px ;
           }

           .van-button{
            height: 100%;
           }
          }
          .more{
            padding: 8px;
            font-size:.7rem ;
            color: #999;
            text-align: center;
          }
    }

   
</style>